<template>
  <div class="toolbar">
    <a-space>
      <a-button @click="$emit('toggle-drawer')" type="primary">
        <a-icon :type="drawerVisible ? 'menu-fold' : 'menu-unfold'" />
        {{ drawerVisible ? '收起' : '元素库' }}
      </a-button>
      <a-divider type="vertical" />
      
      <a-divider type="vertical" />
      <a-dropdown>
        <a-button>
          自动排版 <a-icon type="down" />
        </a-button>
        <a-menu slot="overlay">
          <a-menu-item @click="$emit('auto-layout')">智能排版</a-menu-item>
          <a-menu-item @click="$emit('horizontal-layout')">水平布局</a-menu-item>
          <a-menu-item @click="$emit('vertical-layout')">垂直布局</a-menu-item>
          <a-menu-item @click="$emit('tree-layout')">树形布局</a-menu-item>
          <a-menu-item @click="$emit('circular-layout')">圆形布局</a-menu-item>
          <a-menu-item @click="$emit('grid-layout')">网格布局</a-menu-item>
        </a-menu>
      </a-dropdown>
      <a-divider type="vertical" />
      <a-button @click="$emit('undo')" :disabled="!canUndo">
        <a-icon type="undo" />
        撤销
      </a-button>
      <a-button @click="$emit('redo')" :disabled="!canRedo">
        <a-icon type="redo" />
        重做
      </a-button>
      <a-divider type="vertical" />
      <a-button @click="$emit('center-content')">居中显示</a-button>
      <a-button @click="$emit('zoom-in')">放大</a-button>
      <a-button @click="$emit('zoom-out')">缩小</a-button>
      <a-button @click="$emit('reset-zoom')">重置缩放</a-button>
      <a-divider type="vertical" />
      <a-button @click="$emit('serialize')" type="primary">
        <a-icon type="save" />
        序列化
      </a-button>
      <a-button @click="$emit('import')" type="primary">
        <a-icon type="import" />
        导入
      </a-button>
      <a-divider type="vertical" />
      <a-dropdown>
        <a-button>
          导出 <a-icon type="down" />
        </a-button>
        <a-menu slot="overlay">
          <a-menu-item @click="$emit('export-svg')">导出SVG</a-menu-item>
          <a-menu-item @click="$emit('export-png')">导出PNG</a-menu-item>
          <a-menu-item @click="$emit('export-jpeg')">导出JPEG</a-menu-item>
        </a-menu>
      </a-dropdown>
      <a-button @click="$emit('go-home')">返回首页</a-button>
      <a-button @click="$emit('show-shortcuts')" type="dashed">
        <a-icon type="question-circle" />
      </a-button>
    </a-space>
  </div>
</template>

<script>
export default {
  name: 'Toolbar',
  props: {
    drawerVisible: {
      type: Boolean,
      default: true
    },
    canUndo: {
      type: Boolean,
      default: false
    },
    canRedo: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.toolbar {
  margin-bottom: 8px;
}

.ant-space {
  flex-wrap: wrap;
}
</style> 